<template>
    <div>
        <el-form :inline="true" :model="queryParams" size="mini">
            <el-form-item :label="$t('name')">
                <el-input v-model="queryParams.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="requestData"
                    icon="el-icon-search"
                    >{{ $t("search") }}</el-button
                >
                <el-button
                    type="primary"
                    v-if="addPermission"
                    @click="dialogAddFormVisible = true"
                    icon="el-icon-plus"
                    >{{ $t("add") }}</el-button
                >
            </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            v-loading="loading"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            border
            stripe
            class="init_table"
        >
            <el-table-column
                label="唯一标识"
                min-width="200"
                prop="name"
                show-overflow-tooltip
                align="left"
            >
            </el-table-column>
            <el-table-column prop="title" label="教区名"> </el-table-column>
            <el-table-column prop="id" label="ID"> </el-table-column>
            <el-table-column
                align="center"
                width="300px"
                :label="$t('actions')"
            >
                <template slot-scope="scope">
                    <el-button
                        v-if="updatePermission"
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)"
                        >{{ $t("edit") }}</el-button
                    >
                    <el-button
                        v-if="updatePermission"
                        size="mini"
                        @click="handleParishEdit(scope.$index, scope.row)"
                        >主教府</el-button
                    >
                    <el-button
                        v-if="deletePermission"
                        type="danger"
                        size="mini"
                        @click="handleDelete(scope.$index, scope.row)"
                        >{{ $t("delete") }}</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="mo-page"
            @current-change="requestData"
            :current-page.sync="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total"
        >
        </el-pagination>
        <el-dialog
            :title="$t('add')"
            :visible.sync="dialogAddFormVisible"
            width="40%"
        >
            <el-form :model="addForm" :rules="rules" ref="addForm">
                <el-form-item
                    :label="$t('name')"
                    prop="name"
                    :label-width="formLabelWidth"
                >
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item
                    :label="$t('title')"
                    prop="title"
                    :label-width="formLabelWidth"
                >
                    <el-input v-model="addForm.title"></el-input>
                </el-form-item>
                <el-form-item
                    :label="$t('province')"
                    prop="province"
                    :label-width="formLabelWidth"
                >
                    <province-select
                        :nowProvince.sync="addForm.province_adcode"
                    ></province-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddFormVisible = false">{{
                    $t("cancel")
                }}</el-button>
                <el-button type="primary" @click="handleAddDiocese">{{
                    $t("confirm")
                }}</el-button>
            </div>
        </el-dialog>

        <el-dialog
            :title="$t('edit')"
            :visible.sync="dialogEditFormVisible"
            width="40%"
        >
            <el-form :model="editForm" :rules="rules" ref="editForm">
                <el-form-item
                    :label="$t('name')"
                    prop="name"
                    :label-width="formLabelWidth"
                >
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item
                    :label="$t('title')"
                    prop="title"
                    :label-width="formLabelWidth"
                >
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item
                    :label="$t('province')"
                    prop="province"
                    :label-width="formLabelWidth"
                >
                    <province-select
                        :nowProvince.sync="editForm.province_adcode"
                    ></province-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditFormVisible = false">{{
                    $t("cancel")
                }}</el-button>
                <el-button type="primary" @click="handleEditDiocese">{{
                    $t("confirm")
                }}</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="选择主教府"
            :visible.sync="dialogEditParishFormVisible"
            width="40%"
        >
            <el-form :model="editForm" :rules="rules" ref="editParishForm">
                <el-form-item
                    label="主教府"
                    prop="name"
                    :label-width="formLabelWidth"
                >
                    <parish-select
                        :diocese_id="editForm.id"
                        :nowValue.sync="editForm.cathedral_id"
                    ></parish-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditParishFormVisible = false">{{
                    $t("cancel")
                }}</el-button>
                <el-button type="primary" @click="handleParishEditDiocese">{{
                    $t("confirm")
                }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getDioceseList,
    addDiocese,
    editDiocese,
    deleteDiocese
} from "../../../api/diocese";
import {
    responseDataFormat,
    tableDefaultData,
    editSuccess,
    addSuccess,
    deleteSuccess
} from "../../../libs/tableDataHandle";
import MenuCascader from "../../../components/Cascader/Menu";
import { hasPermission } from "../../../libs/permission";
import { queryParams } from "../../../mixins/queryParams";
import ProvinceSelect from "../../../components/Select/Province";
import ParishSelect from "../../../components/Select/Parish";
export default {
    name: "adminUserIndex",
    components: {
        MenuCascader,
        ProvinceSelect,
        ParishSelect
    },
    mixins: [queryParams],
    data: () => ({
        ...tableDefaultData(),
        dialogEditParishFormVisible: false,
        addForm: {},
        editForm: {},
        zoom: 10,
        rules: {
            name: [{ required: true }, { min: 1, max: 255 }],
            title: [{ required: true }, { min: 1, max: 255 }]
        }
    }),
    methods: {
        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteDiocese(row.id).then(response => {
                        deleteSuccess(index, this);
                        this.requestData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        handleEdit(index, row) {
            this.editForm = row;
            this.nowRowData = { index, row };
            this.dialogEditFormVisible = true;
        },
        handleParishEdit(index, row) {
            this.editForm = row;
            this.nowRowData = { index, row };
            this.dialogEditParishFormVisible = true;
        },
        handleParishEditDiocese() {
            this.$refs["editParishForm"].validate(valid => {
                if (valid) {
                    editDiocese(this.nowRowData.row.id, {
                        cathedral_id: this.editForm.cathedral_id
                    }).then(response => {
                        this.$notify({
                            title: this.$t("success"),
                            message: this.$t('editSuccess'),
                            type: "success",
                            duration: 2000,
                        });
                        this.dialogEditParishFormVisible=false;
                        this.requestData();
                    });
                } else {
                    return false;
                }
            });
        },
        handleEditDiocese() {
            this.$refs["editForm"].validate(valid => {
                if (valid) {
                    editDiocese(this.nowRowData.row.id, this.editForm).then(
                        response => {
                            editSuccess(this);
                            this.requestData();
                        }
                    );
                } else {
                    return false;
                }
            });
        },
        handleAddDiocese() {
            this.$refs["addForm"].validate(valid => {
                if (valid) {
                    addDiocese(this.addForm).then(response => {
                        addSuccess(this);
                        this.requestData();
                    });
                } else {
                    return false;
                }
            });
        },

        requestData() {
            this.loading = true;
            getDioceseList({ ...this.queryParams, page: this.queryPage }).then(
                response => {
                    responseDataFormat(response, this);
                }
            );
        }
    },
    computed: {
        updatePermission: function() {
            return hasPermission("diocese.update");
        },
        addPermission: function() {
            return hasPermission("diocese.store");
        },
        deletePermission: function() {
            return hasPermission("diocese.destroy");
        }
    },
    created() {
        this.requestData();
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
